1 files changed, 141 insertions, 0 deletions
diff --git a/src/app/(main)/websites/[websiteId]/(reports)/funnels/FunnelEditForm.tsx b/src/app/(main)/websites/[websiteId]/(reports)/funnels/FunnelEditForm.tsx
new file mode 100644
index 0000000..5d950ea
--- /dev/null
+++ b/src/app/(main)/websites/[websiteId]/(reports)/funnels/FunnelEditForm.tsx
@@ -0,0 +1,141 @@
+import {
+  Button,
+  Column,
+  Form,
+  FormButtons,
+  FormField,
+  FormFieldArray,
+  FormSubmitButton,
+  Grid,
+  Icon,
+  Loading,
+  Row,
+  Text,
+  TextField,
+} from '@umami/react-zen';
+import { useMessages, useReportQuery, useUpdateQuery } from '@/components/hooks';
+import { Plus, X } from '@/components/icons';
+import { ActionSelect } from '@/components/input/ActionSelect';
+import { LookupField } from '@/components/input/LookupField';
+
+const FUNNEL_STEPS_MAX = 8;
+
+export function FunnelEditForm({
+  id,
+  websiteId,
+  onSave,
+  onClose,
+}: {
+  id?: string;
+  websiteId: string;
+  onSave?: () => void;
+  onClose?: () => void;
+}) {
+  const { formatMessage, labels } = useMessages();
+  const { data } = useReportQuery(id);
+  const { mutateAsync, error, isPending, touch } = useUpdateQuery(`/reports${id ? `/${id}` : ''}`);
+
+  const handleSubmit = async ({ name, ...parameters }) => {
+    await mutateAsync(
+      { ...data, id, name, type: 'funnel', websiteId, parameters },
+      {
+        onSuccess: async () => {
+          touch('reports:funnel');
+          touch(`report:${id}`);
+          onSave?.();
+          onClose?.();
+        },
+      },
+    );
+  };
+
+  if (id && !data) {
+    return <Loading placement="absolute" />;
+  }
+
+  const defaultValues = {
+    name: data?.name || '',
+    window: data?.parameters?.window || 60,
+    steps: data?.parameters?.steps || [{ type: 'path', value: '' }],
+  };
+
+  return (
+    <Form onSubmit={handleSubmit} error={error?.message} defaultValues={defaultValues}>
+      <FormField
+        name="name"
+        label={formatMessage(labels.name)}
+        rules={{ required: formatMessage(labels.required) }}
+      >
+        <TextField autoFocus />
+      </FormField>
+      <FormField
+        name="window"
+        label={formatMessage(labels.window)}
+        rules={{ required: formatMessage(labels.required) }}
+      >
+        <TextField />
+      </FormField>
+      <FormFieldArray
+        name="steps"
+        label={formatMessage(labels.steps)}
+        rules={{
+          validate: value => value.length > 1 || 'At least two steps are required',
+        }}
+      >
+        {({ fields, append, remove }) => {
+          return (
+            <Grid gap>
+              {fields.map(({ id }: { id: string }, index: number) => {
+                return (
+                  <Grid key={id} columns="260px 1fr auto" gap>
+                    <Column>
+                      <FormField
+                        name={`steps.${index}.type`}
+                        rules={{ required: formatMessage(labels.required) }}
+                      >
+                        <ActionSelect />
+                      </FormField>
+                    </Column>
+                    <Column>
+                      <FormField
+                        name={`steps.${index}.value`}
+                        rules={{ required: formatMessage(labels.required) }}
+                      >
+                        {({ field, context }) => {
+                          const type = context.watch(`steps.${index}.type`);
+                          return <LookupField websiteId={websiteId} type={type} {...field} />;
+                        }}
+                      </FormField>
+                    </Column>
+                    <Button onPress={() => remove(index)}>
+                      <Icon size="sm">
+                        <X />
+                      </Icon>
+                    </Button>
+                  </Grid>
+                );
+              })}
+              <Row>
+                <Button
+                  onPress={() => append({ type: 'path', value: '' })}
+                  isDisabled={fields.length >= FUNNEL_STEPS_MAX}
+                >
+                  <Icon>
+                    <Plus />
+                  </Icon>
+                  <Text>{formatMessage(labels.add)}</Text>
+                </Button>
+              </Row>
+            </Grid>
+          );
+        }}
+      </FormFieldArray>
+      <FormButtons>
+        <Button onPress={onClose} isDisabled={isPending}>
+          {formatMessage(labels.cancel)}
+        </Button>
+        <FormSubmitButton>{formatMessage(labels.save)}</FormSubmitButton>
+      </FormButtons>
+    </Form>
+  );
+}